<template>
  <div>
    <h1>{{ num }}</h1>
    <button @click="num++">修改num</button>
    <h1>{{ obj }}</h1>
    <button @click="btnClick">修改obj</button>
  </div>
</template>
<script>
export default {
  name: 'Abc',
  props: {
    num: {
      type: Number,
      default: 0,
      required: true,
      validator(value) {
        return value < 10
      }
    },
    obj: {
      type: Object,
      default: () => {
        return { a: 0 }
      }
    }
  },
  methods: {
    btnClick() {
      this.obj.a++
      console.log(this.obj)
      // this.obj = { a: 2 }
    }
  }

  /*
父子组件传值
   父传子
      子组件标签  属性名=值
      子组件内：
         props:['属性名']
         props:{
             属性名:{
                 type:Number/ [Number,String],
                 default:默认值
                 默认值定义规则
                  2大数据类型   1：基本数据类型（Number,String,Boolean,null,undefined等） 2:复杂数据类型  Function,Object,Array
                  基本数据类型直接定义   default:5
                  复杂数据类型需要一个function去return 复杂数据类型的值  default:()=>{return 复杂数据类型默认值}，
                 required:true,是否必填,默认是false,
                 validator(value){
                     return boolean值， true:传入的数据符合要求  false:不符合要求
                 }
             }
         }
   单向数据流：栈中的值不可修改，堆的值随便修改

   子传父
      子组件标签  @子组件方法名 =“父组件方法”
      this.$emit('子组件方法名',实参值)

*/
}
</script>
<style></style>
